//
// DISCLAIMER:
// Do not change this file because it is core styling.
// Customizing core files will make updating Atlas much more difficult in the future.
// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
//

@mixin button-helpers() {
    /* ==========================================================================
       Button

    //== Design Properties
    //## Helper classes to change the look and feel of the component
    ========================================================================== */
    // Color variations
    .btn,
    .btn-default {
        @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border-color, $btn-default-bg-hover);
    }

    .btn-primary {
        @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border-color, $btn-primary-bg-hover);
    }

    .btn-inverse {
        @include button-variant($btn-inverse-color, $btn-inverse-bg, $btn-inverse-border-color, $btn-inverse-bg-hover);
    }

    .btn-success {
        @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border-color, $btn-success-bg-hover);
    }

    .btn-info {
        @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border-color, $btn-info-bg-hover);
    }

    .btn-warning {
        @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border-color, $btn-warning-bg-hover);
    }

    .btn-danger {
        @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border-color, $btn-danger-bg-hover);
    }

    // Button Sizes
    .btn-lg {
        font-size: $font-size-large;

        img {
            height: calc(#{$font-size-small} + 4px);
        }
    }

    .btn-sm {
        font-size: $font-size-small;

        img {
            height: calc(#{$font-size-small} + 4px);
        }
    }

    // Button Image
    .btn-image {
        padding: 0;
        vertical-align: middle;
        border-style: none;
        background-color: transparent;

        img {
            display: block; // or else the button doesn't get a width
            height: auto; // Image set height
        }

        &:hover,
        &:focus {
            background-color: transparent;
        }
    }

    // Icon buttons
    .btn-icon {
        & > img,
        & > .glyphicon,
        & > .mx-icon-lined,
        & > .mx-icon-filled {
            margin: 0;
        }
    }

    .btn-icon-right {
        display: inline-flex;
        flex-direction: row-reverse;
        align-items: center;

        & > img,
        & > .glyphicon,
        & > .mx-icon-lined,
        & > .mx-icon-filled {
            top: 0;
            margin-left: 4px;
        }
    }

    .btn-icon-top {
        padding-right: 0;
        padding-left: 0;

        & > img,
        & > .glyphicon,
        & > .mx-icon-lined,
        & > .mx-icon-filled {
            display: block;
            margin: 0 0 4px 0;
        }
    }

    .btn-icon-only {
        @extend .btn-icon;
        padding: 0;
        color: $btn-default-icon-color;
        border: none;
    }

    .btn-block {
        display: block;
        width: 100%;
    }

    .btn-block + .btn-block {
        margin-top: 4px;
    }
}
